<template>
  <div class="position_dialog-assets" v-if="userInfo.binderName || userInfo.memberName">
    <p class="no-device" v-if="!userInfo.binderName && !userInfo.memberName">数据加载中~</p>
    <div class="content" v-if="userInfo.toolTipType == '1'">
      <Select
        style="width: 100% !important"
        v-model:value="userInfo.bedId"
        notFoundContent="该地图无床垫"
        @change="bedChange"
      >
        <Select-option v-for="item in deviceList" :key="item.bedId" :value="item.bedId">
          {{ item.expandAttr.BedName }}
        </Select-option>
      </Select>
      <p><span class="name">姓名：</span>{{ userInfo.binderName }}/{{ userInfo.binderTypeName }}</p>
      <p
        ><span class="name">体温：</span>
        <span v-if="userInfo.bodyTemperature">{{ userInfo.bodyTemperature || '' }}℃</span>
        <span v-else>未检测到</span>
      </p>
      <p
        ><span class="name">步数：</span> <span>{{ userInfo.totalSteps }}</span>
      </p>
      <p
        ><span class="name">心率：</span>
        <span v-if="userInfo.braceletHeartRate">{{ userInfo.braceletHeartRate || '' }}bpm</span>
        <span v-else>未检测到</span>
      </p>
      <p
        ><span class="name">电量：</span> <span>{{ userInfo.electricQuantity || '' }}%</span>
      </p>
      <p>
        <span class="name">收缩压:</span>
        <span v-if="userInfo.highBloodPressure">{{ userInfo.highBloodPressure || '' }}mmHg</span>
        <span v-else>未检测到</span>
      </p>
      <p>
        <span class="name">血氧：</span>
        <span v-if="userInfo.bloodOxygen">{{ userInfo.bloodOxygen || '' }}</span>
        <span v-else>未检测到</span>
      </p>
      <p
        ><span class="name">舒张压:</span>
        <span v-if="userInfo.lowBloodPressure">{{ userInfo.lowBloodPressure || '' }}mmHg</span>
        <span v-else>未检测到</span>
      </p>
    </div>
    <div class="content-assets" v-else>
      <div class="header">
        <div class="item">
          <img style="width: 50px; height: 50px" :src="preUrl + userInfo.binderImage" alt="" />
        </div>
        <div class="item">
          <p>{{ userInfo.binderName }}/{{ userInfo.binderTypeName }}</p>
          <p class="series">编号：{{ userInfo.binderCode }}</p>
        </div>
      </div>
      <p class="series">所属机构：{{ userInfo.organizationName }}</p>
      <p class="series"
        >所属区域：
        <span v-if="userInfo.belongMapName"
          >{{ userInfo.belongMapName }}/{{ userInfo.belongAreaName }}</span
        >
        <span v-else style="color: #bfbfbf">暂无数据</span>
      </p>
      <p class="series"
        >告警状态：
        <span style="color: #358b59" v-if="!userInfo.isWarning">正常</span>
        <span style="color: #ed6f6f" v-if="userInfo.isWarning">异常</span>
      </p>
      <p class="series">当前位置：{{ userInfo.areaName }}</p>
      <p class="series">标签号码：{{ userInfo.deviceCode }}</p>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref, defineComponent } from 'vue';
  import { Select, SelectOption } from 'ant-design-vue';
  import { bedlist, bedInfo } from './index.api';
  import { cust } from '/@/utils/rw/utli';

  interface IUserInfo {
    binderName: string;
    binderTypeName: string;
    binderCode: string;
    mapName: string;
    areaName: string;
    isWarning: boolean;
    departmentName: string;
    binderImage: string;
    organizationName: string;
    belongMapName: string;
    belongAreaName: string;
    deviceCode: string;
    bedId: string;
    bodyTemperature: string;
    totalSteps: string;
    electricQuantity: string;
    braceletHeartRate: string;
    highBloodPressure: string;
    lowBloodPressure: string;
    bloodOxygen: string;
    toolTipType: string;
  }

  export default defineComponent({
    components: { Select, SelectOption },
    setup() {
      const deviceList = ref([]);
      const userInfo = ref<IUserInfo>({} as IUserInfo);
      const nowbedId = ref('');
      let callbackPosition;
      const setDeviceList = (list) => {
        deviceList.value = list;
      };

      const getBedList = (params) => {
        bedlist(params).then((res) => {
          deviceList.value = res.data.map((item) => {
            return { ...item, bedId: item.expandAttr.BedId };
          });
        });
      };
      const setBedList = (options) => {
        return new Promise((resolve) => {
          bedlist(options).then((res) => {
            deviceList.value = res.data.map((item) => {
              return { ...item, bedId: item.expandAttr.BedId };
            });
            resolve(null);
          });
        });
      };

      const setUserInfo = (info, callback) => {
        callbackPosition = (params) => {
          callback(params);
        };
        if (info) {
          userInfo.value = info;
          console.log('info', info);
          if (info.expandAttr.BedId && info.toolTipType === '1') {
            console.log('BedId', info.expandAttr.BedId);
            bedChange(info.expandAttr.BedId);
          }
        }
      };

      const bedChange = (e) => {
        console.log(e, 'eeee2');
        let r = deviceList.value.find((item) => {
          return item.bedId === e;
        });
        console.log(deviceList, 'eeee3');
        console.log(r, 'eeee4');
        if (!r) {
          r = {
            binderId: e,
          };
        }
        nowbedId.value = r.binderId;
        bedInfo(r.binderId).then((res) => {
          if (!res.data) {
            return;
          }
          console.log(e, 'eeee');
          if (nowbedId.value !== res.data.memberId) return;
          console.log(e, '1eeee');
          res.data.mapIds = userInfo.value.mapIds;
          userInfo.value = res.data;
          userInfo.value.binderName = res.data.memberName;
          userInfo.value.binderTypeName = res.data.memberTypeName;
        });
      };

      const close = () => {};
      return {
        deviceList,
        userInfo,
        close,
        bedChange,
        setDeviceList,
        setBedList,
        setUserInfo,
        cust,
      };
    },
  });
</script>

<style lang="less">
  .position_dialog-assets {
    box-sizing: border-box;
    min-height: 190px;
    border-radius: 10px;
    font-size: 14px;

    .ant-select {
      .ant-select-selector {
        width: 100% !important;
        font-size: 15px !important;
      }
    }

    .leaflet-popup-close-button {
      color: #fff !important;
      font-size: 20px !important;
    }

    p {
      overflow: hidden;
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.5s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }

  .series {
    font-size: 14px;
  }

  .content-box-assets {
    width: 100%;
  }

  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;

    p {
      width: 50%;
    }
  }

  .content-assets {
    width: 100%;

    .header {
      display: flex;
      width: 100%;

      .item:nth-child(1) {
        width: 60px;
        height: 60px;
      }

      .item:nth-child(2) {
        width: calc(100% - 60px);
      }
    }
  }

  p {
    margin: 5px 0 10px !important;
  }

  .leaflet-popup-content-wrapper {
    z-index: 999;
    width: 310px;
    background: rgb(0 0 0 / 80%);
    color: #fff;
  }
</style>
